import React, { Fragment } from 'react';
import { Button, Drawer, Table, Space, Popconfirm, message } from 'antd';
import AddUser from"./AddUser"
import EditUser from "./EditUser"

class Demo4 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      addVisible: false,
      editVisible: false,
      tableData: [],
      currentUser: null,
    };
  }

  refreshData = () => {
    console.log("execute refreshData");
    const url="http://1.94.134.166:8805/user/page";
    fetch(url,{
      method:'GET',
      headers:{
        Authorization: localStorage.getItem('Authorization'),
      },
    })
      .then((response)=>response.json())
      .then((res)=>{
        const{data}=res;
        if(data&&Array.isArray(data.records)) {
          this.setState({ tableData:data.records });
        }
      })
  }

  componentDidMount(){
    console.log("componentDidMount");
    this.refreshData();
  }

  delConfirm=(data)=>{
    const url=`http://1.94.134.166:8805/user/${data.userId}`;
    fetch(url,{
      method:'DELETE',
      headers:{
        'Content-type':'application/json',
        Authorization:localStorage.getItem('Authorization'),
      },
    })
      .then((response)=>response.json())
      .then((res)=>{
        const {code=0, msg="" }=res;
        if (code==0){
          this.refreshData();
          message.info(msg);
        }
      })
  }

  delCancel=()=>{}

  columns=[
    {
      title:'用户账号',
      dataIndex:'userId',
      key:'userId',
    },
    {
      title:'用户名称',
      dataIndex:'username',
      key:'username',
    },
    {
      title:'操作',
      key:'action',
      render:(_, record)=>{
        const popConfirmTitle=`是否删除${record.username}`;
        return (
          <Space size="middle">
            <a onClick={()=>this.handleOpenEditDrawer(record)}>编辑</a>
            <Popconfirm
              title={popConfirmTitle}
              onConfirm={()=>this.delConfirm(record)}
              onCancel={this.delCancel}
              okText="Yes"
              cancelText="No"
            >
              <a>删除</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  handleOpenAddDrawer=()=>{
    this.setState({addVisible:true});
  }

  handleOpenEditDrawer=(data)=>{
    this.setState(
      {
        editVisible: true,
        currentUser: data,
      },
      ()=>{
        console.log("Updated currentUser:",this.state.currentUser);
      }
    );
  }

  onAddClose=()=>{
    this.setState({addVisible:false});
  }

  onEditClose=()=>{
    this.setState({editVisible:false});
  }

  render() {
    return (
      <Fragment>
        <Button type="primary" onClick={this.handleOpenAddDrawer}>
          新增
        </Button>
        <Table
          dataSource={this.state.tableData}
          columns={this.columns}
        />

        <Drawer
          title="新增用户"
          placement="right"
          width="50%"
          onClose={this.onAddClose}
          open={this.state.addVisible}
        >
          <AddUser
            refresh={this.refreshData}
            closeDrawer={this.onAddClose}
          />
        </Drawer>

        <Drawer
          title="编辑用户"
          placement="left"
          width="50%"
          onClose={this.onEditClose}
          open={this.state.editVisible}
        >
          <EditUser
            refresh={this.refreshData}
            closeDrawer={this.onEditClose}
            currentUser={this.state.currentUser}
          />
        </Drawer>
      </Fragment>
    );
  }
}

export default Demo4;
